<!-- <template>
  <div class="m-video" >
    <div class="video" id="video_two"></div>
  </div>
</template>
<script>
  import base from "@/request/api/base.js"
  export default {
    name: 'index',
    data() {
      return {
        video: {
          container: '#video_two', // 容器的ID或className
          variable: 'player', // 播放函数名称
          autoplay: false,
          live: true,
          // ffmpeg -i rtsp://admin:admin@192.168.1.100:8557/h264 -f flv -r 25 -s 960*601 -an rtmp://192.168.211.129:1935/stream/hello2
          video: null // 视频地址
        },
        queryInfo: {
          place: '15304'
        }
      };
    },
    mounted() {
      
      this.getVideoList();
      // [].redu
    },
    methods: {
      async getVideoList() {
        const { data } = await this.$api.video.getVideoList(this.queryInfo);
        console.log(base.video);
        this.update(data)
      },
      update(data) {
        var reg = new RegExp(/\/\/([^/:]+:\d*)?/)
        var url = base.video.match(reg)[1];
        const res = data.map((item, index) => {
          item.url = item.url.replace(reg, url);
          console.log(item.url);
          return item
        })
        this.videoList = res
        this.video.url = this.videoList[0]?.url
        this.initVideo()
      },
      initVideo() {
        var player = new ckplayer(this.video);
      },
    },
    mounted() {
      // this.getOneVideo();
    }
  };
</script>

<style lang="less" scoped>
  .m-video {
    height: 100%;
    width: 100%;

    >.video {
      height: 100%;
      width: 100%;
      position: relative;
      z-index: 99999;
    }
  }
</style>

<!-- <template>
     <videoPlayer
       class="vjs-custom-skin videoPlayer"
       :options="playerOptions"
     ></videoPlayer>
 </template>

 <script>
 import 'video.js/dist/video-js.css'
 import { videoPlayer } from "vue-video-player";
 import "videojs-flash";
 export default {
   components: {
     videoPlayer,
   },
   data() {
     return {
       playerOptions: {
         // height: this.$refs.myvideo.offsetHeight,
         // width: this.$refs.myvideo.offsetWidth,
         sources: [
           {
             type: "rtmp/mp4",
             src: "rtmp://localhost:1935/live/123",
           },
         ],
         techOrder: ["flash"],
         autoplay: false,
         controls: true,
       },
     };
   },
 };
 </script>
 <style lang="less">
   .myVideo {
     height: 100%;
     width: 100%
   }
 </style> -->
 -->